<template>
  <div class="buildTypeSum" ref="buildTypeSum"></div>
</template>

<script lang="ts">
export default {
  name: "buildTypeSum"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onMounted, nextTick, ref, watch } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";

import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

import { reportModule } from "/@/api/analysis";
import { storageLocal } from "/@/utils/storage";

const props = defineProps({
  monorId: {
    type: String || Number,
    default: ""
  }
});
// const emit = defineEmits(["clickItem"]);
const buildTypeSum = ref<HTMLElement | null>(null) as any;

let echartInstance: ECharts;

const initChart = (xAxisData, seriesData) => {
  if (!echartInstance) {
    return;
  }
  echartInstance.setOption({
    // title: {
    //   text: "验收类型提单量",
    //   textStyle: {
    //     fontSize: 16,
    //     fontWeight: "normal",
    //     padding: 10
    //   }
    // },
    color: ["#5298FF", "#FFB265", "#85DF00"],
    grid: {
      left: 44,
      right: 44,
      top: 44, // 29
      bottom: 40
    },
    legend: {
      left: 44,
      padding: [8, 5, 4, 0],
      itemWidth: 8,
      itemHeight: 8
    },
    label: {
      show: true,
      position: "top"
    },
    tooltip: {
      trigger: "axis"
    },
    xAxis: {
      type: "category",
      // triggerEvent: true,
      // axisTick: {
      //   alignWithLabel: true
      // },
      axisTick: { show: false },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(160,185,252,0.6)"
        }
      },
      axisLabel: {
        margin: 4,
        textStyle: {
          color: "#545578",
          lineHeight: 17
        },
        formatter: function (params) {
          var newParamsName = "";
          var paramsNameNumber = params.length;
          var provideNumber = 4; //一行显示多少个文字
          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
          if (paramsNameNumber > provideNumber) {
            for (var p = 0; p < rowNumber; p++) {
              var tempStr = "";
              var start = p * provideNumber;
              var end = start + provideNumber;
              if (p == rowNumber - 1) {
                tempStr = params.substring(start, paramsNameNumber);
              } else {
                tempStr = params.substring(start, end) + "\n";
              }
              newParamsName += tempStr;
            }
          } else {
            newParamsName = params;
          }
          return newParamsName;
        }
      },
      data: xAxisData
    },
    yAxis: {
      type: "value",
      axisTick: { show: false },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(160,185,252,0.6)"
        }
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(160,185,252,0.4)"
        }
      },
      axisLabel: {
        textStyle: {
          color: "#545578"
        }
      }
    },
    series: seriesData
  });
};

function initechartInstance(xAxisData, seriesData) {
  const echartDom = document.querySelector(".buildTypeSum");
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  initChart(xAxisData, seriesData);

  // echartInstance.on("click", function (params) {
  //   let value = "" as any;
  //   if (params.componentType == "xAxis") {
  //     value = params.value;
  //   } else {
  //     value = params.name;
  //   }
  //   console.log(22, "********", value, params);
  //   emit("clickItem", value);
  // });
}

const getData = async (monorId?) => {
  try {
    let sectionId = storageLocal.getItem("sectionInfo")?.id;
    let projectManageId = storageLocal.getItem("projectInfo")?.id;
    const { code, data } = await reportModule({
      sectionId,
      projectManageId,
      monId: monorId || ""
    });
    if (code === 200) {
      let xAxisData = [];
      let seriesData = [];
      if (monorId) {
        xAxisData = ["质量检查", "材料验收", "隐蔽验收", "施工试验及见证检测"];
        seriesData = [
          {
            name: "标准提单量",
            data: [
              data?.qtyBzTotal,
              data?.materialBzTotal,
              data?.concealBzTotal,
              data?.witnessBzTotal
            ],
            type: "bar",
            barWidth: "8px",
            barGap: "50%"
          },
          {
            name: "提单量",
            data: [
              data?.qtyTdTotal,
              data?.materialTdTotal,
              data?.concealTdTotal,
              data?.witnessTdTotal
            ],
            type: "bar",
            barWidth: "8px",
            barGap: "50%"
          },
          {
            name: "完成量",
            data: [
              data?.qtyCompleteTotal,
              data?.materialCompleteTotal,
              data?.concealCompleteTotal,
              data?.witnessCompleteTotal
            ],
            type: "bar",
            barWidth: "8px",
            barGap: "50%"
          }
        ];
      } else {
        xAxisData = [
          "质量检查",
          "材料验收",
          "隐蔽验收",
          "施工试验及见证检测",
          "安全文明"
        ];
        seriesData = [
          {
            name: "标准提单量",
            data: [
              data?.qtyBzTotal,
              data?.materialBzTotal,
              data?.concealBzTotal,
              data?.witnessBzTotal,
              data?.civilizBzTotal
            ],
            type: "bar",
            barWidth: "8px",
            barGap: "50%"
          },
          {
            name: "提单量",
            data: [
              data?.qtyTdTotal,
              data?.materialTdTotal,
              data?.concealTdTotal,
              data?.witnessTdTotal,
              data?.civilizTdTotal
            ],
            type: "bar",
            barWidth: "8px",
            barGap: "50%"
          },
          {
            name: "完成量",
            data: [
              data?.qtyCompleteTotal,
              data?.materialCompleteTotal,
              data?.concealCompleteTotal,
              data?.witnessCompleteTotal,
              data?.civilizCompleteTotal
            ],
            type: "bar",
            barWidth: "8px",
            barGap: "50%"
          }
        ];
      }
      nextTick(() => {
        initechartInstance(xAxisData, seriesData);
      });
    }
  } catch (err) {
    console.log(err);
  }
};

getData();

onMounted(() => {
  nextTick(() => {
    addResizeListener(buildTypeSum.value, resetRender);
  });
  // useEventListener("resize", () => {
  //   console.log("resize");
  //   if (!echartInstance) return;
  //   useTimeoutFn(() => {
  //     echartInstance.resize();
  //   }, 180);
  // });
});

watch(
  () => props.monorId,
  newVal => {
    getData(newVal);
  }
);

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(buildTypeSum.value, resetRender);
});
</script>

<style lang="scss" scoped>
.buildTypeSum {
  width: 100%;
  height: 100%;
}
</style>
